<!--description: Logo通常有logo图片和站点标题组成，还有网站的链接。logo图片和站点标题有上下或者左右布局。本组件默认是左右布局。-->

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  link: {
    type: String,
    default:'/'
  },
  imageSrc: {
    type: String,
    required: true
  },
  altText: {
    type: String,
    default: 'Logo'
  },
  title: {
    type: String,
    default: 'title'
  },
  flexDirection: {
    type: String,
    default: 'row',
    validator: (value) => ['row', 'column'].includes(value)
  },
  gap: {
    type: String,
    default: 'gap-6' // Default to medium gap
  },
  margin: {
    type: String,
    default: '' // No margin by default
  },
  imgHeight: {
    type: String,
    default: 'h-6 sm:h-9' // Default height
  },
  spanClass: {
    type: String,
    default: '' // No additional classes by default
  }
});
</script>

<template>
  <a :href="link" :class="['flex', { 'flex-row': flexDirection === 'row', 'flex-col': flexDirection === 'column' }, gap, margin]">
    <img :src="imageSrc" :alt="altText" :class="[imgHeight]" />
    <span :class="['self-center text-xl font-semibold whitespace-nowrap dark:text-white', spanClass]">{{ title }}</span>
  </a>
</template>